let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  oneLineEchart: function (id, data) {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: "7%",
        bottom: "10%",
        top: "15%",
        width: "90%"
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
        data: data.xData
      },
      yAxis: {
        type: 'value',
        name: "单位（次数）",
        splitLine: {
          lineStyle: {
            color: "rgba(26,139,170,0.29)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
      },
      series: [
        {
          type: 'line',
          data: data.seriesData,
          lineStyle: {
            color: '#f8c907' // 设置线的颜色为红色
          },
          itemStyle: {
            color: '#f8c907', // 数据点颜色
          },
          areaStyle: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
            //相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [
                {
                  offset: 0,
                  color: '#FED52F', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(5,42,49,0.4)', // 100% 处的颜色
                },
              ], false), //globalCoord为false，表示使用自身坐标系进行渐变。
          }
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
  twoLineEchart: function (id, data) {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: "7%",
        bottom: "10%",
        top: "15%",
        width: "90%"
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
        data: data.xData
      },
      yAxis: {
        type: 'value',
        name: "单位（kW·h）",
        splitLine: {
          lineStyle: {
            color: "rgba(26,139,170,0.29)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
      },
      series: [
        {
          type: 'line',
          data: data.seriesData,
          lineStyle: {
            color: '#DF547B' // 设置线的颜色为红色
          },
          itemStyle: {
            color: '#DF547B', // 数据点颜色
          },
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
  threeLineEchart: function (id, data) {
    let option = {
      color: ['#2391FF', '#1cc238', '#FFDF25', '#F45D41', '#B06AF7', '#4AEAB0'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['空调', '照明', '插座'],
        right: '5%',
        textStyle: {
          color: "#ffffff"
        },
      },
      grid: {
        left: "7%",
        bottom: "10%",
        top: "15%",
        width: "90%"
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
        data: data.xData
      },
      yAxis: {
        type: 'value',
        name: "单位（kW）",
        splitLine: {
          lineStyle: {
            color: "rgba(26,139,170,0.29)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
      },
      series: [
        {
          name: '空调',
          type: 'line',
          data: data.seriesData1
        },
        {
          name: '照明',
          type: 'line',
          data: data.seriesData2
        },
        {
          name: '插座',
          type: 'line',
          data: data.seriesData3
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  }
}
